<template>
  <div>
    <el-drawer
      :with-header="false"
      :visible.sync="isShowGoodsDrawer"
      direction="rtl"
      :before-close="close"
      size="75%"
      :append-to-body="true"
      destroy-on-close
      :modal-append-to-body="false"
    >
      <div type="primary" class="drawer-close-btn" @click="close">
        <img
          class="drawer-back"
          src="@/assets/images/drawer-back.png"
          alt=""
        /><span class="close-text">返回商品管理</span>
      </div>
      <div class="drawer-con-wrap">
        <h2 class="customer-name">{{ goodsTtile }}</h2>
      </div>
      <div class="mainBox">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item name="1">
            <template slot="title">
              <div class="collTile">商品信息</div>
            </template>
            <div class="collMain">
              <div class="clueTable" v-if="nowData.length > 0">
                <div class="tagBox">物料信息</div>
                <clueTable
                  ref="clueTable1"
                  :headData="columnList"
                  :tableData="nowData"
                  :loadding="loadding"
                  isCommon
                >
                </clueTable>
                <div class="tagBox" style="margin-top: 20px">商品信息</div>
                <clueTable
                  ref="clueTable2"
                  :headData="columnList"
                  :tableData="nowData"
                  :loadding="loadding"
                  isCommon
                >
                </clueTable>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template slot="title">
              <div class="collTile">允销范围</div>
            </template>
            <div class="collMain">
              <div class="topBox">
                <div>
                  <span style="margin-right: 20px">是否复用允销范围：</span>
                  <el-radio-group v-model="sendFrom.isYun">
                    <el-radio :label="0">是</el-radio>
                    <el-radio :label="1">否</el-radio>
                  </el-radio-group>
                </div>
                <div style="margin-left: 50px">
                  <span style="margin-right: 20px">选择商品：</span>
                  <el-select v-model="sendFrom.goods" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="header-right">
                <el-button
                  type="primary"
                  style="background: #204ec4"
                  @click="isYxDialogShow = true"
                  ><i class="el-icon-plus" style="margin-right: 10px"></i
                  >新增</el-button
                >
              </div>
              <div class="commonTable">
                <el-table :data="yxTableData" border style="width: 100%">
                  <el-table-column prop="date" label="中心"> </el-table-column>
                  <el-table-column prop="name" label="事业部">
                  </el-table-column>
                  <el-table-column prop="address" label="区域基价">
                  </el-table-column>
                  <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        class="oButton red"
                        @click="delFn(scope.row)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template slot="title">
              <div class="collTile">白名单</div>
            </template>
            <div class="collMain">
              <el-tabs v-model="whiteActiveName" @tab-click="handleClick">
                <el-tab-pane label="最小起订量" name="0"></el-tab-pane>
                <el-tab-pane label="配置管理" name="1"></el-tab-pane>
              </el-tabs>
              <div class="header-right">
                <el-button
                  type="primary"
                  style="background: #204ec4"
                  @click="addCustomer"
                  ><i class="el-icon-plus" style="margin-right: 10px"></i
                  >新增</el-button
                >
              </div>
              <div class="commonTable">
                <el-table :data="userDataTable" border style="width: 100%">
                  <el-table-column prop="date" label="客户编码">
                  </el-table-column>
                  <el-table-column prop="customerName" label="客户名称">
                  </el-table-column>
                  <el-table-column prop="address" label="联系人">
                  </el-table-column>
                  <el-table-column prop="address" label="手机号">
                  </el-table-column>
                  <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        class="oButton red"
                        @click="delFn(scope.row)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
        <div class="bottomBox">
          <el-button class="oBtn" style="margin-right: 30px">取 消</el-button>
          <el-button
            type="primary"
            class="oBtn"
            @click="$refs.drawer.closeDrawer()"
            :loading="isLoading"
            >{{ isLoading ? "提交中 ..." : "上架" }}</el-button
          >
        </div>
      </div>
    </el-drawer>
    <UserDialog
      :isDictionaryDialogShow="isDictionaryDialogShow"
      @addCustomFn="addCustomFn"
      @closeFn="closeFn"
    />
    <YxDialog
      :isYxDialogShow="isYxDialogShow"
      @addCustomFn="addCustomFn"
      @closeFn="closeYxFn"
    />
  </div>
</template>
<script>
import clueTable from "@/components/clueManage/clues/clueTable";
import UserDialog from "./userDialog.vue";
import YxDialog from "./yxDialog.vue";
export default {
  components: { UserDialog, clueTable, YxDialog },
  props: {
    columnList: {
      type: Array,
      default: [],
    },
    nowData: {
      type: Array,
      default: [],
    },
    isShowGoodsDrawer: {
      type: Boolean,
      default: false,
    },
    goodsTtile: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      newColumn: {
        columnList: [],
        nowData: [],
      },
      isLoading: false,
      loadding: true,
      isDictionaryDialogShow: false,
      isYxDialogShow: false,
      whiteActiveName: "0",
      drawer: false,
      activeNames: ["1", "2", "3"],
      sendFrom: {
        isYun: 0,
      },
      yxTableData: [
        {
          id: 1,
        },
      ],
      userDataTable: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
  methods: {
    close() {
      this.$emit("closGoodsDrawer", false);
    },
    closeYxFn() {
      this.isYxDialogShow = false;
    },
    handleChange(val) {
      console.log(val);
    },
    handleClick(e) {
      console.log({ e });
      this.whiteActiveName = e.index;
    },
    addCustomer() {
      this.isDictionaryDialogShow = true;
    },
    addCustomFn(val) {
      let arr = this.userDataTable.concat();
      arr = [...arr, ...val];
      this.userDataTable = arr;
    },
    closeFn(val) {
      this.isDictionaryDialogShow = val;
    },
  },
  mounted() {
    setTimeout(() => {
      this.loadding = false;

      this.$refs.clueTable1.columnList = this.columnList;
      this.$refs.clueTable2.columnList = this.columnList;
    }, 100);
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/drawer-back.scss";
@import "@/assets/styles/pageStyle.scss";
.collTile {
  padding-left: 20px !important;
  color: #172b4d;
  font-size: 18px;
}
.bottomBox {
  display: flex;
  margin-top: 100px;
  justify-content: center;
  .oBtn {
    width: 30%;
  }
}
.collMain {
  padding: 0 20px;
  .topBox {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .header-right {
    float: right;
    margin-bottom: 20px;
  }
}
.customer-name {
  font-size: 22px;
  font-weight: 700;
  color: #172b4d;
}
.mainBox {
  padding: 0px 30px 30px 30px;
}
.el-button {
  // padding: 9px 19px !important;

  //控制字大小
  ::v-deep * {
    font-size: 14px;
    font-weight: 500px !important;
  }

  ::v-deep i {
    margin-right: 13px;
  }
}

.tagBox {
  background-color: #0052cc;
  padding: 5px 20px;
  color: white;
  display: inline-block;
  margin-bottom: 10px;
  border-radius: 5px;
  font-size: 14px;
}
.btn-blue {
  color: #204ec4;
  border: 1px solid #d7dbec;
  border-radius: 4px;

  span {
    font-weight: bolder;
  }
}

.btn-hei {
  width: 112px;
  color: #344563;
  border: 1px solid #dbdde2;
  border-radius: 4px;
}

::v-deep .el-drawer__body {
  background: #f5f6fa;
  box-shadow: -6px 0px 17px 0px rgba(38, 44, 71, 0.15);
  border-radius: 4px 0px 0px 4px;
}

::v-deep .el-tabs__item {
  font-size: 14px;
  color: #5a607f !important;
}

::v-deep .el-tabs__item.is-active {
  font-size: 14px;
  color: #204ec4 !important;
}

.drawer-con-wrap {
  .mt8-black-btn {
    padding: 0 !important;
  }
  .mt8 {
    margin-top: 20px;

    .createBtn {
      color: #164acd;
      border: 1px solid #dbdde2;
    }
  }

  padding: 0px 32px 0px;

  .drawer-header {
    .header-name {
      font-size: 14px;
      color: #6b778c;
    }

    .custom-header {
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .header-left {
        display: flex;
        align-items: center;

        .arrow-list {
          margin-left: 24px;
        }
      }
    }
    .link {
      .edit-link {
        font-size: 16px;
        margin-left: 8px;
      }
    }
    .custom-base {
      padding: 16px 0;
      background: #ffffff;
      box-shadow: 0px 1px 3px 0px rgba(21, 34, 50, 0.08);
      border-radius: 3px;
      display: flex;
      align-items: stretch;
      flex-direction: row;
      .custom-base-item {
        min-width: 20%;
        padding: 0 25px;
        .item-label {
          font-size: 14px;
          font-weight: 500;
          color: #7e84a3;
        }
        .item-value {
          font-size: 14px;
          font-weight: 400;
          margin-top: 5px;
          color: #131523;
        }
      }
      .custom-base-item:last-child {
        border-right: none;
      }
    }
    .info-block-wrap {
      display: flex;
      margin-top: 16px;
      align-items: stretch;
      flex-direction: row;
      justify-content: space-between;
      box-shadow: 0px 1px 4px 0px rgba(21, 34, 50, 0.08);
      border-radius: 4px;
      .info-left-wrap {
        padding: 10px 25px 25px 25px;
        overflow: hidden;
        background: #ffffff;
        margin-right: 30px;
        border-radius: 4px;
        width: 100%;
      }
      .info-right-wrap {
        height: auto;
        width: 315px;
        background: #ffffff;
        border-radius: 4px;
      }
    }
  }
}
</style>
